<template>
    <div>
      <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="">
          <el-input v-model="searchInfo.DID" placeholder="请输入DID" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
     
      <div class="gva-table-box">
       
        <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
         <!--  <el-table-column type="selection" width="55" /> -->
         <el-table-column align="left" label="序号" min-width="60" type="index"/>
          <el-table-column align="left" label="DID" min-width="180" prop="did"/>
          <el-table-column align="left" label="证书字符串" min-width="150" prop="pub_str" :show-overflow-tooltip="true"/>
          <el-table-column align="left" label="算法" min-width="180" prop="algo" />
          <el-table-column align="left" label="登记时间" min-width="150" prop="regis_at" sortable="custom" />

        </el-table>
        <div class="gva-pagination">
          <el-pagination
              :current-page="page"
              :page-size="pageSize"
              :page-sizes="[10, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
          />
        </div>
      </div>
  
      <!-- 新增/编辑用户抽屉 -->
      <el-drawer v-model="drawerVisible" size="60%" :before-close="closeDrawer" :show-close="false">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="text-lg">{{ drawerTitle }}</span>
            <div>
              <el-button @click="closeDrawer">取消</el-button>
              <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
          </div>
        </template>
  
        <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="100px">
          <el-form-item label="DID" prop="DID">
            <el-input v-model="userInfo.DID" autocomplete="off" />
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="userInfo.userName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="userInfo.idCard" autocomplete="off" />
          </el-form-item>
          <el-form-item label="电话号" prop="phone">
            <el-input v-model="userInfo.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="银行卡号" prop="bankCard">
            <el-input v-model="userInfo.bankCard" autocomplete="off" />
          </el-form-item>
          <el-form-item label="审核进度" prop="auditProgress">
            <el-input v-model="userInfo.auditProgress" autocomplete="off" />
          </el-form-item>
          <el-form-item label="审核状态" prop="auditStatus">
            <el-input v-model="userInfo.auditStatus" autocomplete="off" />
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </template>
  
  
  
  <script setup>
  import {ref, reactive, computed} from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import ExportExcel from '@/components/exportExcel/exportExcel.vue'
  import { getlistRequest } from '@/api/certificate'
  
  // 分页相关数据
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)

  
  // 表格数据
  const tableData = ref([
    { DID: 'DID1', String: 'sdfasdfsaf', algorithm: 'AES', registration: '2022-1-1' },
    { DID: 'DID2', String: 'sdfantynyjytjtf', algorithm: 'MD5', registration: '2022-2-3' },
    { DID: 'DID3', String: 'uktnyrtbrasdfsaf', algorithm: 'ECC', registration: '2022-6-3' },
    { DID: 'DID4', String: 'nukyjxwe', algorithm: 'DSA', registration: '2020-5-4' },
    { DID: 'DID5', String: 'cerewvtbrytu', algorithm: 'RC4', registration: '2022-10-1' },
   
  ])

  const filteredData = ref([...tableData.value])
  
  // 搜索信息
  const searchInfo = reactive({ DID: '' })
  
  // 选中的用户
  const selectedUsers = ref([])
  
  // 抽屉的显示状态及标题
  const drawerVisible = ref(false)
  const drawerTitle = ref('')
  
  // 用户信息
  const userInfo = reactive({
    DID: '',
    userName: '',
    idCard: '',
    phone: '',
    bankCard: '',
    auditProgress: '',
    auditStatus: ''
  })
  
  // 表单验证规则
  const rules = ref({
    DID: [{ required: true, message: '请输入DID', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    phone: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }],
    bankCard: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
    auditProgress: [{ required: true, message: '请输入审核进度', trigger: 'blur' }],
    auditStatus: [{ required: true, message: '请输入审核状态', trigger: 'blur' }]
  })
  
  const onSubmit = () => {
    filteredData.value = tableData.value.filter(item =>
    item.DID.includes(searchInfo.DID)
  )
  
}

const onReset = () => {
  searchInfo.DID = ''
  filteredData.value = [...tableData.value]
}

const sortInfo = reactive({
  prop: '',
  order: ''
})

const sortedData = computed(() => {
  let data = [...filteredData.value]
  if (sortInfo.prop && sortInfo.order) {
    data.sort((a, b) => {
      let aValue = a[sortInfo.prop]
      let bValue = b[sortInfo.prop]
      if (sortInfo.prop === 'status') {
        // 按照状态值排序
        aValue = statusOptions.value.find(option => option.value === a[sortInfo.prop]).label
        bValue = statusOptions.value.find(option => option.value === b[sortInfo.prop]).label
      }
      if (sortInfo.order === 'ascending') {
        return aValue > bValue ? 1 : -1
      } else {
        return aValue < bValue ? 1 : -1
      }
    })
  }
  console.log(data)
  return data
})


  // 打开抽屉
  const openDrawer = (title, row) => {
    drawerTitle.value = title === '新增' ? '新增用户' : '查看详情'
    if (row) {
      userInfo.DID = row.DID
      userInfo.userName = row.userName
      userInfo.idCard = row.idCard
      userInfo.phone = row.phone
      userInfo.bankCard = row.bankCard
      userInfo.auditProgress = row.auditProgress
      userInfo.auditStatus = row.auditStatus
    } else {
      userInfo.DID = ''
      userInfo.userName = ''
      userInfo.idCard = ''
      userInfo.phone = ''
      userInfo.bankCard = ''
      userInfo.auditProgress = ''
      userInfo.auditStatus = ''
    }
    drawerVisible.value = true
  }
  
  // 关闭抽屉
  const closeDrawer = () => {
    drawerVisible.value = false
  }
  
  // 提交表单
  const submitForm = () => {
    // 提交表单逻辑
    console.log('提交表单数据', userInfo)
    // 这里可以添加逻辑来处理表单数据，例如发送到服务器
    closeDrawer()
  }
  
  // 删除按钮点击事件
  const onDelete = () => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      ElMessage({ type: 'success', message: '删除成功' })
      // 删除按钮逻辑
    }).catch(() => {
      console.log('取消删除')
    })
  }
  
  // 刷新按钮点击事件
  const onFresh = () => {
    ElMessageBox.confirm('确定要刷新吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      ElMessage({ type: 'success', message: '刷新成功' })
      // 刷新按钮逻辑
    }).catch(() => {
      console.log('取消刷新')
    })
  }
  
  const sortChange = ({prop, order}) => {
  sortInfo.prop = prop
  sortInfo.order = order
  console.log('排序变化', prop, order)
}
  // 选择变化处理
  const handleSelectionChange = (val) => {
    selectedUsers.value = val
    console.log('选择变化', val)
    // 选择变化逻辑
  }
  
  // 获取表格数据
  const getTableData = async () => {
    try {
      const response = await getlistRequest(pageSize.value, page.value);
      tableData.value = response.data.list; // 初始化表格数据
      total.value = response.data.page_num;
    } catch (error) {
      console.error('API Error:', error);
      ElMessage.error('获取数据失败');
    }
  };

getTableData()
  </script>
  
  
  
  <style scoped lang="scss">
  .warning {
    color: #dc143c;
  }
  </style>
  